<template>
    <div>
        <el-table v-loading="loading" :data="tableData" style="width: 100%" v-bind="attr"
            :header-cell-style="{ background: '#FFFFFF', color: '#000000' }" stripe>
            <el-table-column v-for="(item, index) in column" :key="index" v-bind="item">
                <template v-if="item.slots" #default="{ row }">
                    <slot :name="item.slots" :row="row"></slot>
                </template>
            </el-table-column>
        </el-table>

        <div v-show="!hidePage" class="paginationBox">
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                :page-sizes="[15, 20, 30, 40]" background layout="total, sizes, prev, pager, next, jumper"
                :total="totalPages" />
        </div>
    </div>
</template>
  
<script setup >

import { ref, defineProps, reactive, onMounted, watch, defineExpose, useAttrs } from 'vue'
const loading = ref(false);

const attr = useAttrs()

const props = defineProps({
    column: Array,
    parameter: Object,
    query: Function,
    hidePage: Boolean,
    content: String
});

const tableData = ref([]);
const totalPages = ref(0);
const pagination = reactive({
    pageNum: 1,
    pageSize: 15,
});

function queryFn(query = props.query) {
    loading.value = true;
    query({
        ...props.parameter,
        ...{
            pageNum: pagination.pageNum,
            pageSize: pagination.pageSize,
        },
    })
        .then((res) => {
            console.log(res);
            loading.value = false;
            console.log(props.content);
            if (props.content) {
                tableData.value = res[props.content]
            } else {
                tableData.value = res.data.content;
                totalPages.value = res.data.totalSize;
            }

        });
}

onMounted(() => {
    if (props.query) {
        queryFn();
    }

});

watch([() => pagination.pageNum, () => pagination.pageSize], () => {
    queryFn();
});

function refresh(isReset = true) {
    if (isReset) {
        pagination.pageNum = 1;
    }

    queryFn();
}

function changeQuery(query) {
    pagination.pageNum = 1;
    pagination.pageSize = 15
    queryFn(query);
}


defineExpose({ refresh, changeQuery });
</script>
<style scoped lang="scss">
.paginationBox {
    display: flex;
    justify-content: right;
    margin-top: 20px;
}
</style>
  